<template>
	<view>
		<block v-if="bankList.length!=0" v-for="(item,index) in bankList" :key="index">
			<view class="card_img flex" :style="{backgroundColor:item.color}">
				<view class="bank_icon">
					<image :src="getImg(item.icon)" mode="scaleToFill" style="width: 90rpx;height: 90rpx;"></image>
				</view>
				<view class="">
					<view class="" style="font-size: 36rpx;color: #fff;">
						{{item.bank}}
					</view>
					<view class="" style="font-size: 32rpx;color: #fff;">
						借记卡
					</view>
				</view>
			</view>
			<view class="bank_num">
				{{item.card_number}}
			</view>
		</block>
		<block v-else>
			<view class="" style="width: 300rpx;height: 100rpx;background-color: #b9ddd3;">
				暂无银行卡信息
			</view>
		</block>
		<view class="fotter">
			<view class="add flex" @click="addBank">
				<image src="/static/images/add.png" mode="widthFix"
					style="width: 40rpx;height: 40rpx;margin-top: 20rpx;margin-left: 20rpx;"></image>
				<view style="font-size: 32rpx;margin-top: 18rpx;margin-left: 10rpx;">添加银行卡</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getBankCard
	} from '@/api/bank'
	export default {
		data() {
			return {
				// bankList:[]
				bankList: [], 
			}
		},
		onLoad() {
			getBankCard().then(res => {
				console.log(res);
				this.bankList = res
				let list = []
				for (let item in res) {
					list.push({
						text: res[item].bank + res[item].card_number,
						value: res[item].unique_code2
					})
				}
				uni.setStorageSync("uniqueCode", list)
			})
		},
		methods: {
			addBank() {
				uni.navigateTo({
					url: '/pagesB/addBank/addBank'
				})
			},
			getImg(url) {
				return getApp().globalData.baseImg + url;
			},
		}
	}
</script>

<style>
	.card_img {
		height: 200rpx;
		width: 85%;
		margin: 0 auto;
		background-color: #b95a58;
		border-radius: 15rpx;
		margin-top: 20rpx;
		padding: 30rpx;
		gap: 20rpx;
	}

	.bank_icon {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #fff;
		text-align: center;
	}

	.bank_num {
		position: relative;
		top: -100rpx;
		color: #fff;
		font-size: 45rpx;
		text-align: center;
		height: 5rpx;
	}

	.add {
		width: 86%;
		height: 90rpx;
		padding: 20rpx;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 15rpx;
	}

	.fotter {
		margin-top: 20rpx;
		/* margin-bottom: 90rpx; */
	}
</style>